<template>
  <div class="addAppChannelSkillGroup">
    <el-form
      ref="ruleForm"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="140px"
    >
      <affix
        :label="$t('configLazyLoad.channel.appBaseSetting')"
        class="fir_tit"
      >
        <el-form-item
          :label="$t('configLazyLoad.channel.enterName')"
          prop="companyName"
        >
          <el-input v-model.trim="form.companyName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.channel.appName')" prop="name">
          <el-input
            v-model.trim="form.name"
            :placeholder="$t('configLazyLoad.channel.appTip4')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('configLazyLoad.channel.useSche')"
          v-show="configType === 'config'"
        >
          <el-radio-group v-model.trim="form.scheduleEnable">
            <el-radio :label="false">{{
              $t('configLazyLoad.public.noReuse')
            }}</el-radio>
            <el-radio :label="true">{{
              $t('configLazyLoad.public.reuse')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="prompt">{{ $t('configLazyLoad.channel.appTip5') }}</p>
        <chooseSkillCroup
          v-show="!form.scheduleEnable"
          :toPeerInfo="form.ToPeer"
        ></chooseSkillCroup>
        <el-form-item
          v-show="!form.scheduleEnable"
          :label="$t('configLazyLoad.channel.systemWelcome')"
        >
          <div class="remark">
            <span>{{ $t('configLazyLoad.channel.webStyleTip5') }}</span>
            <el-tooltip
              class="item"
              effect="dark"
              popper-class="reportTip"
              placement="bottom"
              style="opacity: 1"
            >
              <div slot="content">
                {{ $t('configLazyLoad.channel.webStyleTip6') }}
              </div>
              <span class="tip"
                ><i class="iconfont icon-tixingweizhi"></i
              ></span>
            </el-tooltip>
          </div>
          <div class="placeholder_box">
            <dl
              v-for="place in placeholderArr"
              @click="addPlaceholder(place.data)"
              :title="place.content"
            >
              {{ place.content }}
              <i class="iconfont icon-zhankai"></i>
            </dl>
          </div>
          <el-input type="textarea" v-model="form.welcome"></el-input>
        </el-form-item>
        <!--此处代码为暂时隐藏-->
        <el-row class="config" v-if="systemMsgLogoUi.show">
          <el-col :span="8">&nbsp;</el-col>
          <el-col :span="16">
            <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="systemMsgLogoUi.percent"
              :status="systemMsgLogoUi.type"
              v-if="systemMsgLogoUi.show"
            ></el-progress>
          </el-col>
        </el-row>
        <el-form-item
          :label="$t('configLazyLoad.channel.systemAvater')"
          v-model.trim="form.systemMsgLogo"
        >
          <div class="wrap_logo">
            <img
              v-show="form.systemMsgLogo"
              :src="form.systemMsgLogo"
              alt=""
              class="logo fl"
            />
            <p class="uploadBtn fl" id="uploadSystemLogo">
              {{ $t('configLazyLoad.channel.uplopadImage') }}
            </p>
          </div>
          <span class="desc">{{
            $t('configLazyLoad.channel.webStyleTip3')
          }}</span>
        </el-form-item>
        <welcomeMsgEditBox
          ref="welcomeMsgBox"
          v-show="!form.scheduleEnable"
          :formId="form._id"
          :platform="'sdk'"
          :agentWelMsgPush="form.convertManualAfterMsgSwitch"
          :agentWelMsgCon="form.convertManualAfterMsg"
        ></welcomeMsgEditBox>
        <el-form-item :label="$t('configLazyLoad.channel.enableSatis')">
          <el-radio-group v-model.trim="form.webchat_csr">
            <el-radio :label="false">{{
              $t('configLazyLoad.public.noReuse')
            }}</el-radio>
            <el-radio :label="true">{{
              $t('configLazyLoad.public.reuse')
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-show="!form.scheduleEnable"
          :label="$t('configLazyLoad.channel.enableRobot')"
        >
          <el-select v-model="form.robot" @visible-change="robotSelectShow">
            <el-option value="">{{ $t('public.pleasePick') }}</el-option>
            <el-option
              v-for="item in robotOptions"
              :key="item._id"
              :label="item.robot_name_new"
              :disabled="item.disabled"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="!form.scheduleEnable && aiRobots.length > 0"
          :label="$t('configLazyLoad.channel.robotAssistId')"
          prop="robotAssistId"
        >
          <el-select
            size="small"
            v-model.trim="form.robotAssistId"
            :placeholder="$t('public.pleasePick')"
            @visible-change="robotSelectShow"
          >
            <el-option value="">{{ $t('public.pleasePick') }}</el-option>
            <el-option
              v-for="item in aiRobots"
              :key="item._id"
              :label="item.robot_name_new"
              :disabled="item.disabled"
              :value="item._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </affix>
      <affix
        :label="$t('configLazyLoad.channel.turnManConfig')"
        class="fir_tit"
      >
        <el-form-item
          :label="$t('configLazyLoad.channel.turnTip1')"
          label-width="170px"
        >
          <el-radio-group v-model.trim="form.showTransferBtn">
            <el-radio :label="false">{{ $t('public.no') }}</el-radio>
            <el-radio :label="true">{{ $t('public.yes') }}</el-radio>
          </el-radio-group>
          <questionTooltip
            :tipContent="$t('configLazyLoad.channel.turnTip2')"
            class="questionTootip"
          >
          </questionTooltip>
        </el-form-item>
        <el-form-item
          :label="$t('configLazyLoad.channel.turnTip3')"
          label-width="170px"
        >
          <el-radio-group v-model.trim="form.openTriggerWord">
            <el-radio :label="false">{{ $t('public.no') }}</el-radio>
            <el-radio :label="true">{{ $t('public.yes') }}</el-radio>
          </el-radio-group>
          <questionTooltip
            :tipContent="$t('configLazyLoad.channel.turnTip4')"
            class="questionTootip"
          >
          </questionTooltip>
        </el-form-item>
        <el-form-item
          :label="$t('configLazyLoad.channel.turnManWord')"
          v-show="form.openTriggerWord"
          label-width="170px"
        >
          <el-input
            v-model.trim="form.convert_words"
            :placeholder="$t('configLazyLoad.channel.turnTip5')"
          ></el-input>
          <div class="remark_span">
            <span v-html="$t('configLazyLoad.channel.turnTip6')"></span>
          </div>
        </el-form-item>
      </affix>
      <affix :label="$t('configLazyLoad.channel.pushSetting')" class="fir_tit">
        <el-tabs v-model="activePushName" @tab-click="handleClick">
          <el-tab-pane label="Android" name="Android">
            <el-form-item
              :label="$t('configLazyLoad.interfaceConfig.pushType')"
            >
              <el-radio-group v-model.trim="form.androidpushsdk">
                <el-radio :label="true">{{
                  $t('configLazyLoad.channel.SDKPush')
                }}</el-radio>
                <el-radio :label="false">{{
                  $t('configLazyLoad.channel.pushAddress')
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="$t('configLazyLoad.channel.pushUrl')"
              v-if="!form.androidpushsdk"
            >
              <el-input
                type="text"
                v-model.trim="form.androidSyncAddress"
                :placeholder="$t('configLazyLoad.channel.appTip6')"
              ></el-input>
              <p style="font-size: 12px">
                {{ $t('configLazyLoad.channel.appTip7')
                }}<a
                  href="https://developer.7moor.com/online-service-kf02/"
                  :class="{ oem_7moor: $store.state.oemObj.oemFlag }"
                  target="_blank"
                  >{{ $t('configLazyLoad.channel.appTip8') }}</a
                >
              </p>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="IOS" name="IOS">
            <el-form-item
              :label="$t('configLazyLoad.interfaceConfig.pushType')"
            >
              <el-radio-group v-model.trim="isIospush">
                <el-radio :label="false">{{
                  $t('configLazyLoad.channel.appTip9')
                }}</el-radio>
                <el-radio :label="true">{{
                  $t('configLazyLoad.channel.pushAddress')
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="!isIospush">
              <el-form-item
                :label="$t('configLazyLoad.channel.appName')"
                prop="apnCert.appName"
                :rules="[
                  {
                    required: true,
                    message: $t('validate.required'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  type="text"
                  v-model.trim="form.apnCert.appName"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="bundle ID："
                prop="apnCert.bundleId"
                :rules="[
                  {
                    required: true,
                    message: $t('validate.required'),
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  type="text"
                  v-model.trim="form.apnCert.bundleId"
                ></el-input>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.uploadKey')">
                <el-upload
                  class="temp-upload"
                  :action="uploadUrl"
                  accept=".p12"
                  :limit="1"
                  :data="uploadHeaders"
                  :file-list="fileList"
                  :with-credentials="true"
                  :on-error="removeUploadList"
                  :on-remove="removeUploadList"
                  :on-success="uploaded"
                  ref="upload"
                  name="upload"
                >
                  <el-button class="small_btn">{{
                    $t('configLazyLoad.channel.chooseKey')
                  }}</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item
                :label="$t('configLazyLoad.interfaceConfig.pushType')"
                prop="apnCert.production"
              >
                <el-radio-group v-model.trim="form.apnCert.production">
                  <el-radio :label="true">{{
                    $t('configLazyLoad.channel.productENV')
                  }}</el-radio>
                  <el-radio :label="false">{{
                    $t('configLazyLoad.channel.testENV')
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-show="fileList.length"
                :label="$t('configLazyLoad.channel.keyPWD')"
              >
                <el-input
                  type="text"
                  v-model.trim="form.apnCert.passwd"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item
              :label="$t('configLazyLoad.channel.pushUrl')"
              v-show="isIospush"
            >
              <el-input
                type="text"
                v-model.trim="form.iosSyncAddress"
                :placeholder="$t('configLazyLoad.channel.appTip6')"
              ></el-input>
              <p style="font-size: 12px">
                {{ $t('configLazyLoad.channel.appTip7')
                }}<a
                  href="https://developer.7moor.com/online-service-kf02/"
                  :class="{ oem_7moor: $store.state.oemObj.oemFlag }"
                  target="_blank"
                  >{{ $t('configLazyLoad.channel.appTip8') }}</a
                >
              </p>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </affix>
      <affix
        class="basicSet padding_bottom"
        :label="$t('configLazyLoad.channel.QueueKeeping')"
      >
        <el-form-item
          :label="$t('configLazyLoad.channel.QueueKeeping1')"
          label-width="170px"
        >
          <el-radio-group v-model.trim="form.queueKeep">
            <el-radio :label="true">{{ $t('public.yes') }}</el-radio>
            <el-radio :label="false">{{ $t('public.no') }}</el-radio>
          </el-radio-group>
          <questionTooltip
            :tipContent="$t('configLazyLoad.channel.QueueKeeping4')"
            class="questionTootip"
          >
          </questionTooltip>
        </el-form-item>
         <el-form-item v-show="form.queueKeep" :label="''"
          label-width="170px">
          <el-input
            v-model.trim.number="form.queueKeepTime"
            style="width: 150px; margin-right: 20px"
            @blur="queueKeepTimeBlur"
            min="1"
            max="720"
            type="number"
            :placeholder="$t('configLazyLoad.channel.QueueKeeping2')"
            size="mini"
          >
            <template slot="append">{{
              $t('configLazyLoad.channel.QueueKeeping3')
            }}</template>
          </el-input>
        </el-form-item>
      </affix>
      <el-form-item>
        <el-button type="primary" class="primary_btn fr" @click="onSubmit">{{
          $t('config.channel.saveSettings')
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { deepClone, getCurrentDate } from '@/utils/m7Utils'
import { uploadTo7moorlogoImgDomain } from '@/utils/qiniuUtils'
import * as uuid from 'uuid'
import bus from '@/store/eventBus'
import chooseSkillCroup from '../base/chooseSkillGroup'
import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
import welcomeMsgEditBox from '@/components/business-modules/config/channelConfig/base/welcomeMsgEditBox.vue'
import affix from '../../../../ui-modules/affix/Affix.vue'
export default {
  name: 'addAppChannelSkillGroup',
  data () {
    return {
      form: {
        _id: this.skillInfo._id || '',
        name: this.skillInfo.name || '',
        companyName: this.skillInfo.companyName || '',
        accessId: this.skillInfo.accessId || '',
        welcome: this.skillInfo.welcome || '',
        webchat_showTypeName: this.skillInfo.webchat_showTypeName || false,
        webchat_csr: this.skillInfo.webchat_csr || false, // 是否启用满意度
        ToPeer: this.skillInfo.ToPeer || [],
        robot: this.skillInfo.robot || '',
        robotType: this.skillInfo.robotType || '',
        assistRobotType: '',
        serviceStates: this.skillInfo.serviceStates || '',
        platform: this.skillInfo.platform || '',
        syncAddress: this.skillInfo.syncAddress || '',
        scheduleEnable: this.skillInfo.scheduleEnable || false,
        robotAssistId: this.skillInfo.robotAssistId || '',
        androidpushsdk: this.skillInfo.androidpushsdk || false, // true是启用了Android的sdk推送 如果是 false则为填写的推送地址推送
        showTransferBtn: this.skillInfo.showTransferBtn || true, // 转人工按钮是否显示
        openTriggerWord: this.skillInfo.openTriggerWord || false, // 是否开启触发词命中转人工
        convert_words: this.skillInfo.convert_words || '', // 转人工触发词
        convertManualAfterMsgSwitch: this.skillInfo.convertManualAfterMsgSwitch || false, // 人工欢迎语是否推送
        convertManualAfterMsg: this.skillInfo.convertManualAfterMsg || '', // 人工欢迎语推送内容
        systemMsgLogo: this.skillInfo.systemMsgLogo || '',  //  系统消息头像
        androidSyncAddress: '', // 安卓的推送地址
        iosSyncAddress: '', // ios的推送地址
        appName: '', // app名称
        bundleId: '',
        apnCert: { // 新增 ios apn 推送
          appName: '', // app名称
          bundleId: '',
          filePath: '', // apn证书文件，上传证书时，填写上传文件接口返回的filepath信息
          fileName: '', // apn证书文件，上传证书时，填写上传文件接口返回的fileName信息
          production: true, // apn证书文件，上传证书时，指定是正式环境还是测试环境
          passwd: ''  // apn证书解密密码
        },
        queueKeep: this.skillInfo.queueKeep || false,
        queueKeepTime: this.skillInfo.queueKeepTime || 5
      },
      fileList: [], // 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
      uploadUrl: '/fileUpload', // 必选参数，上传的地址
      uploadHeaders: { // 设置上传的请求头部
        type: 'undefined',
        module: '',
        sessionId: this.$store.state.session.sessionId
      },
      systemMsgLogoUi: {       //  系统消息头像上传进度条
        show: false,
        percent: 0,
        type: 'success',
        fileName: '',
        disabled: false
      },
      m7uploaders: [],
      activePushName: 'Android', // 当前的要填的推送系统
      isIospush: true, // ios选择的推送方式 true为url推送 false为 证书上传
      AndroidFilePath: '',
      AndroidFileName: '',
      robotOptions: [],
      placeholderArr: [
        {
          content: this.$t('configLazyLoad.channel.nickName'),
          data: 'nickName'
        }
      ],
      rules: {
        companyName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      },
      isEnabled: false, // 是否启用技能组
      aiRobots: []
    }
  },
  props: {
    skillInfo: {
      type: Object,
      default: {}
    },
    isNewApp: Boolean
  },
  computed: {
    configType () {
      let paths = this.$route.path.split('/')
      return paths[2]
    }
  },
  methods: {
    queueKeepTimeBlur () {
      if (this.form.queueKeepTime > 720) {
        this.form.queueKeepTime = 720
      }
      if (this.form.queueKeepTime < 1) {
        this.form.queueKeepTime = 1
      }
    },
    onSubmit () { // 保存设置
      this.isEnabled = false // 是否启用技能组
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.scheduleEnable) { // 是否启用日程
            if (!this.form.ToPeer.length) {
              this.$message.error(this.$t('webchat.placeSkillsGrouop'))
              return
            } else {
              this.form.ToPeer.forEach((item) => {
                if (item.status === 'enable') {
                  this.isEnabled = true
                }
              })
              if (!this.isEnabled) {
                this.$message.error(this.$t('configLazyLoad.channel.appTip13'))
                return
              }
            }
            if (this.form.robot === '') {
              this.form.robotType = ''
            } else {
              let robotT = this.robotOptions
              for (let n = 0; n < robotT.length; n++) {
                if (this.form.robot === robotT[n]._id) {
                  if (robotT[n].Nick) {
                    this.form.robotType = robotT[n].robotType
                  } else {
                    this.form.robotType = robotT[n].robot_type_new
                  }
                }
              }
            }
            //          机器人辅助座席，增加assistRobotType参数
            this.aiRobots.map((item) => {
              if (this.form.robotAssistId === item._id) {
                if (this.form.robotAssistId !== '') {
                  this.$set(this.form, 'assistRobotType', item.robotType)
                } else {
                  this.$set(this.form, 'assistRobotType', '')
                }
              }
            })
            this.form.convertManualAfterMsgSwitch = this.$refs.welcomeMsgBox.welcomeMsgPush
            this.form.convertManualAfterMsg = this.$refs.welcomeMsgBox.editor.txt.html()
          }
          let obj = deepClone(this.form)
          if (this.isIospush) { // 如果ios是url推送方式
            obj.apnCert = null // 将证书上传选项设置为null
          } else {
            obj.iosSyncAddress = '' // 否则 清空推送地址
          }
          if (this.form.androidpushsdk) { // 启用了Android的sdk推送
            obj.androidSyncAddress = '' // 清空推送地址
          }
          obj.syncAddress = ''
          if (!this.isNewApp) { // 重新编辑App设置
            this.$store.dispatch('updateAppWebchatCfg', obj).then((res) => {
              if (res && res.success) {
                this.$message.success(this.$t('configLazyLoad.channel.editSuccess'))
                this.$emit('refresh')
              }
            })
          } else { // 新建App设置
            obj.platform = 'sdk'
            obj.serviceStates = 1
            this.$store.dispatch('addWebchatCfg', obj).then((res) => {
              if (res && res.success) {
                this.$message.success(this.$t('configLazyLoad.channel.addSuccess'))
                this.$emit('refresh')
              }
            })
          }
        } else {
          if (this.form.apnCert && (!this.form.apnCert.bundleId || !this.form.apnCert.appName)) {
            this.activePushName = 'IOS'
          }
        }
      })
    },
    fetchData () {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields() // 表单重置
      }
      this.fileList = []
      // 初始化表单的数据
      if (this.skillInfo) { // 从上层传过来的数据进行初始化
        for (let key in this.form) {
          if (key === 'apnCert' && !this.skillInfo.apnCert) { // 是否是ios的推送设置
            for (let i in this.form.apnCert) {
              this.form.apnCert[i] = ''
            }
          } else {
            this.form[key] = this.skillInfo[key]
          }
        }
        this.form.scheduleEnable = this.skillInfo.scheduleEnable ? this.skillInfo.scheduleEnable : false // 是否开启了日程 兼容老数据的操作
        this.form.androidpushsdk = this.skillInfo.androidpushsdk ? this.skillInfo.androidpushsdk : false // true是启用了Android的sdk推送 如果是 false则为填写的推送地址推送
        this.form.robotAssistId = this.skillInfo.robotAssistId ? this.skillInfo.robotAssistId : '' // 机器人辅助座席
        this.form.convertManualAfterMsgSwitch = this.skillInfo.convertManualAfterMsgSwitch ? this.skillInfo.convertManualAfterMsgSwitch : false // 人工欢迎语是否推送
        this.form.convertManualAfterMsg = this.skillInfo.convertManualAfterMsg ? this.skillInfo.convertManualAfterMsg : '' // 人工欢迎语推送内容
        this.form.queueKeep = this.skillInfo.queueKeep ? true : false
        this.form.queueKeepTime = this.skillInfo.queueKeepTime ? this.skillInfo.queueKeepTime : 5
        if (this.form.apnCert && this.form.apnCert.production !== '') {
          // this.form.apnCert.production = true
          this.$set(this.form.apnCert, 'production', this.form.apnCert.production)
        } else {
          this.$set(this.form.apnCert, 'production', true)
        }
        if (this.skillInfo.syncAddress && !this.skillInfo.androidSyncAddress && !this.skillInfo.iosSyncAddress) { // 如果有旧的推送地址
          this.form.androidSyncAddress = this.skillInfo.syncAddress // 安卓的推送地址 兼容老数据
          this.form.iosSyncAddress = this.skillInfo.syncAddress // ios的推送地址 兼容老数据
          this.isIospush = true // 是否是ios的地址推送
          this.form.androidpushsdk = false // 是否是Android的sdk推送
        }
        if (this.skillInfo.apnCert) { // 对老数据的兼容 回显上传的附件
          if (this.skillInfo.apnCert.bundleId) {
            if (this.skillInfo.apnCert.fileName) {
              this.fileList.push({ name: this.skillInfo.apnCert.fileName, url: this.skillInfo.apnCert.filePath })
            }
            this.isIospush = false
          } else {
            this.isIospush = true // 如果不是证书推送方式 则为 url推送方式
          }
        } else {
          this.isIospush = true
        }
      }
      if (this.form.openTriggerWord === undefined) {
        this.$set(this.form, 'openTriggerWord', false)
      }
      if (this.form.showTransferBtn === undefined) {
        this.$set(this.form, 'showTransferBtn', true)
      }
      if (this.form.convert_words === undefined) {
        this.$set(this.form, 'convert_words', '')
      }
      if (this.form.systemMsgLogo === undefined) {
        this.$set(this.form, 'systemMsgLogo', '')
      }
      this.activePushName = 'Android' // 当前选中的系统
      this.$store.dispatch('getCache', { type: 'robotConfig' }).then(req => {
        let robotConfig = this.$getCache('robotConfig')
        this.robotOptions = robotConfig || []
        this.$store.dispatch('queryM7AIRobot', {}).then((res2) => { // 获取AIRobot列表
          if (res2 && res2.success && res2.data && res2.data.length > 0) {
            let aiRobot = res2.data
            aiRobot.forEach((item1) => {
              item1._id = item1.Id
              item1.robot_name_new = item1.Nick
            })
            this.aiRobots = aiRobot
            let configArr = []
            this.robotOptions.forEach((config) => {
              if (config.robot_type !== 'didi') {
                configArr.push(config)
              }
            })
            this.robotOptions = configArr.concat(this.aiRobots)
          }
        })
      })
      // 判断小七是否回显
      if (this.$store.state.isM7RobotOpen === false) {
        if (this.form.robot === '5825a500dfe52d5edc6e36c9') {
          this.form.robot = ''
        }
      }
    },
    initUploadImageFile () {
      let account = this.$store.state.session.user.account
      let self = this
      let fileAdded = function (up, files) {
        console.log('fileAdd')
      }
      let beforeUploadSysLogo = function (up, file) {
        self.systemMsgLogoUi.show = true
        self.systemMsgLogoUi.percent = 0
        console.log('beforeUpload1')
      }
      let upProgressSysLogo = function (up, file) {
        self.systemMsgLogoUi.percent = file.percent
        console.log('uploadSystem')
      }
      let upCompleteSysLogo = function (up, file) {
        self.systemMsgLogoUi.show = false
        console.log('uploadCompleteSystem')
      }
      let systemLogouploaded = function (up, file, info) {
        let domain = up.getOption('domain')
        let res = JSON.parse(info||'{}')
        
        let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey ) // 获取上传成功后的文件的Url
        if (!sourceLink) {
          return
        }
        self.form.systemMsgLogo = sourceLink
        self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
      }
      let error = function (up, err, errTip) {
        if (errTip) {
          self.$message.error(errTip)
        }
        console.log('uploadError ' + errTip)
      }
      let key = function (up, file) {
        let date = getCurrentDate()
        let today = new Date()
        let time = today.getTime()
        let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
        return key
      }
      let filters = {
        mime_types: [
          { title: 'Image files', extensions: 'jpg,gif,png,jpeg' }
        ]
      }
      this.m7uploaders.push(
        uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadSystemLogo', filters, fileAdded, beforeUploadSysLogo, upProgressSysLogo, upCompleteSysLogo, systemLogouploaded, error, key)
      )
    },
    addPlaceholder (data) {
      this.form.welcome += '{' + data + '}'
    },
    removeUploadList (file, fileList) {
      this.$refs.upload.clearFiles()
      this.form.apnCert.passwd = '' // 重置证书密码
      this.form.apnCert.filePath = ''
      this.form.apnCert.fileName = ''
      this.fileList.splice(this.fileList.findIndex(v => v.name === file.name), 1)
    },
    handleClick (tab) {
      this.activePushName = tab.name
    },
    uploaded (response, file, fileList) {
      if (response && response.filePath) {
        let fileName = /[^.]+$/.exec(response.fileName)
        if (fileName) {
          if (file.size <= 0) {
            this.$message.error(this.$t('configLazyLoad.channel.appTip14'))
            this.$refs.upload.clearFiles()
            return false
          }
          this.form.apnCert.filePath = response.filePath
          this.form.apnCert.fileName = response.fileName
          this.fileList.push({ name: response.fileName, url: response.filePath })
        } else {
          this.$message.error(this.$t('sms.uploadFileWrong'))
          this.$refs.upload.clearFiles()
          return false
        }
      } else {
        this.$message.error(this.$t('webchat.uploadError'))
        this.$refs.upload.clearFiles()
        return false
      }
    },
    robotSelectShow (show) {
      if (show) {
        this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
          if (res2 && res2.success && res2.data && res2.data.length > 0) {
            let aiRobot = res2.data
            let allRobot = this.robotOptions
            aiRobot.forEach((item1) => {
              item1._id = item1.Id
              item1.robot_name_new = item1.Nick
              let exist = allRobot.findIndex((all) => {
                return all.Id === item1.Id
              })
              if (exist === undefined) {
                allRobot.push(item1)
              } else {
                allRobot.splice(exist, 1, item1)
              }
            })
            this.aiRobots = aiRobot
            this.robotOptions = allRobot
          }
        })
      }
    }
  },
  components: {
    chooseSkillCroup,
    questionTooltip,
    welcomeMsgEditBox,
    bus,
    affix
  },
  watch: {
    skillInfo: 'fetchData'
  },
  mounted () {
    this.$nextTick(() => {
      this.initUploadImageFile()
    })
  },
  beforeDestroy () {
    this.m7uploaders.forEach(uploader => {
      uploader &&
        uploader.destroy &&
        uploader.destroy()
    })
  },
  beforeMount () {
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../../assets/common.styl'
.addAppChannelSkillGroup
  padding 20px
.prompt
  color $c-prompt
  margin-bottom 20px
  margin 0 0 20px 140px
.remark
  color $c-prompt
  font-size 12px
  .tip
    cursor pointer
    display inline-block
    height 16px
    width 16px
    border 1px solid $c-main
    text-align center
    line-height 16px
    border-radius 50%
    margin-left 2px
    .iconfont
      font-size 10px
      color $c-main
.remark_span
  line-height 14px
  color $c-prompt
  font-size 12px
.placeholder_box
  margin-top 10px
  font-size 12px
  line-height 16px
  dl
    border 1px solid $c-main
    color $c-main
    border-radius 6px
    display inline-block
    padding 4px
    margin 0 10px 10px 0
    cursor pointer
  .iconfont
    font-size 12px
.el-radio-group
  .el-radio
    margin-right 30px
    margin-left 0
.el-tab-pane
  margin-top 20px
.small_btn
  height 30px
.questionTootip
  position absolute
  right -2em
.uploadBtn
  margin 6px 0 0 0
  min-width 90px
  height 24px
  border 1px solid $c-main
  line-height 24px
  text-align center
  display inline-block
  border-radius 3px
  cursor pointer
  color $c-main
  font-size 12px
.wrap_logo
  height 36px
  margin-bottom 6px
.desc
  color $c-prompt
  font-size 12px
.logo
  ax-width 36px
  max-height 36px
  margin-right 20px
</style>
